CSS ANIMATION

Vendor prefixes are a way for browsers to support features before they are finalized because of the implementation differences between browsers. Hopefully they will not be needed in the future. Currently, most recent versions of Firefox, Opera, and IE support CSS animations without prefixes. They should be written with the non-prefixed vendor prefix placed last so that their FINAL implementation will override any current browser implementation due to the cascading rule of CSS that will interpret the last know rule that have the same set of properties. Common vendor prefixes include:

• -webkit- prefix version for WebKit browsers
• -moz- prefix for Mozilla Firefox
• -o- for Opera
• -ms- for Microsoft
• unprefixed property (no -xxxxx-)

To help with creating all of the various types of vendor prefixes you can use CSS tools like AutoPrefixer or CSS3Generator or if you are a little more advanced you can use CSS preprocessor like LESS and SASS which can automatically add vendor prefixes.
Both animation property and @keyframes rules need to be prefixed. Unprefixed rules should always come last to make code future-proof.

TIP: Check caniuse.com website to see if vendor prefixes are still needed.

Numbers in the table specifies the first browser version that fully supports the property. Numbers followed by -webkit-, -moz-, -ms- , or -o- specifies the first version that worked with a prefix. See the web site http://www.caniuse.com . Browsers that do not support animation will ignore the animation rules and properties. Modernize can be used to check if CSS animations are supported and provide you the option to create a fallback approach.

Property	IE	Chrome	FireFox	Safari	Opera
@keyframes & animation	10.0	4.0 -webkit-	16.0, 5.0 -moz-	4.0 -webkit-	15.0 -webkit-, 12.1, 12.0 -o-

 

• CSS Animation does not work with IE 9 or earlier.
• Like Abode Animate, jQuery, or GSAP, CSS animation is created by using the following steps:
• Create an object (and position it on the screen using CSS)
• Give the object an animation name to bind it to an element or elements(e.g., animation: changeColor)
• Tell object to do something at various from/to or percentage keyframes
• WebKit prefix refers to the following browsers: Chrome, Safari, Opera. Notice that the prefixes has a dash in front of them (e.g., -webkit)
• Keyframes can be in percent from 0% to 100% and any increment between (e.g., 10%, 20%, 50%, 100%) or use the “from” and “to” keywords which represents only two keyframes from 0% to 100%.

Animation must be bind to a selector type by specifying at least these two properties:

•  animation-name
•  animation-duration

The following table lists the @keyframes rule and all the animation properties:

Property	Description
@keyframes	Specifies the animation keyframes
animation	A shorthand property for setting ALL the animation properties, except the animation-play-state and the animation-fill-mode property
animation-name (REQUIRED)	Specifies the name of the @keyframes animation
animation-duration (REQUIRED)	Specifies how many seconds or milliseconds an animation takes to complete one cycle
animation-delay	Specifies when the animation will start
animation-direction	Specifies whether or not the animation should play in reverse on alternate cycles
animation-iteration-count	Specifies the number of times an animation should be played
animation-timing-function	Specifies the speed curve of the animation
animation-fill-mode	Specifies what CSS properties will apply for the element when the animation is finished or when it has a delay
animation-play-state	Specifies whether the animation is running or paused

 

NOTE: Beside the required animation-name and animation-duration properties, two other animation properties that are good to assign is animation-timing-function (or easing) which determine how the speed is DISTRIBUTED across the animation (e.g., fast to slow, slow to fast, etc.)
There are two major ways of defining easing:

1. Predefined key words include:

• ease—is the default if no value is set and is similar to the ease-in-out.
• linear—constant speed
• ease-in—start slow and speed up
• ease-out— start fast and then slow down
• ease-in-out— starts slow, speed up and then slows down again.
• inherit—
• linear—
• step-end step-start—
• !important) —

2. The second way to define easing is to use the easing function (i.e., cubic-bezier(x1, y1, x2, y2)). The easing keywords are actually shortcuts of Bezier curves as such you can define you own. Go to http://www.cubic-bezier.com/ to define your own and then copy and paste the code into your project.
-webkit-animation-timing-function: cubic-bezier (.53, 1.46, 1,-0.49);
Ceaser is another tool that can be used that is located at http://mathewlein.com/ceaser/
The second is the animation-iteration-count which determines how many times the animation will play. The default is 1 if it is not defined.

• A number (i.e., 1, 2, etc.)
• infinite—loop repeatedly
• inherit—
• !important—

NOTE: Two additional properties are animation-delay (how long the animation will delay before starting in units of second or milliseconds) and animation-fill-mode. Normally, the animation will move back to its original position, to prevent this set the animation-fill-mode.

• None—is the default if you don’t declare it.
• Forward—the object will maintain the CSS property from the LAST executed keyframe after the animation has finished which in the case of the from/to keywords this would be the “to” key frame.
• Backward—the object will animate to the FIRST keyframe which in the case of the from/to keywords this would be the “from” keyframe.
• Both—the object will APPLY BOTH the forward and backward behaviors where the CCS properties are applied before and after the animation.

The final two properties that you may want to set is the animation-direction for each iteration:

• Normal – this is the default if none is set. Animation will play from the to/from key frames or the zero to 100 percent. The keyframes will play in the order created.
• Reverse – reverse the animation. In essence, the last keyframe will play first and the first last. This is from the 100% to zero percent keyframes or from the “from” keyframe to the “to” keyframe.
• Alternate—will start normal and then reverse. Alternate can only be used if the animation has an iteration-count larger than one. Because it will first play forward and then in reverse.
• Alternate reverse—will first reverse the direction of the animation and then alternate

And the animation-play-state which determine whether the animation is running or paused

The @keyframes rule creates keyframes for the animation using a CSS property that will gradually change from the CURRENT CSS property to the NEW CSS property at those keyframes. It specifies what happen over the course of one cycle of the animation.

1. Using “From” and “To” Keywords: To Change Color

View Demo

 

The example below will change the color of the box from blue to green in 6 seconds.

1. Create a new HTML framework page.
2. Add the following highlighted CSS code in the head element and a blank div element in the body element
   
   

   <!DOCTYPE html>
   <html>
   <head>
   <style> 
   div { width:100px;height:100px;background:red;
      -webkit-animation-name: changeColor; 
      -webkit-animation-duration: 6s;
       animation-name:changeColor;
       animation-duration: 6s;
   }
   
   @-webkit-keyframes changeColor {
     from {background:blue;}
     to {background:green;}
   }
   
   @keyframes changeColor {
       from {background:blue;}
       to {background:green;}
   }
   </style>
   </head>
   <body>
   <div></div>
   </body>
   </html>

   
   NOTES:
   
   • Notice we will typically start the class definition with regular CSS properties (e.g., width:100px;height:100px;background:blue;) and then add CSS animation properties (e.g., -webkit-animation-name: changeColor; etc.) all within the <style> element.
   • When an animation is finished, it changes back to its original CSS property (e.g., background color) or properties (e.g., background color and width), if it differs from the keyframes. For example, if you change the previous keyframes to:
     
     from {background:blue; width:200px;}
     to {background:green; width:300px;}
     
     The red box with “pop” to 200px (from its original 100px) and “grow” to 300px and then “pop” back to its original 100px when the animation is complete. We will see later how to prevent the animation from going back to its original CSS properties.
     
     
   • Notice that all of the keyframe rules have a “@” symbol in front of them.
   • Using the keywords “from” and “to” limit you to only two keyframes. We will see in the next example how to use percentages ot create multitude keyframes.
   • Adding multiple animation properties (name/value pairs) is the same as adding any CSS rules by separating them with semicolons (;).
3. CHECK POINT: Save file and preview it in a browser. You should see the box changes immediately from it initial color or blue to red and then to green over 6 seconds.

2. Using Percentage Values: To Change Color

View Demo

The example below will change the box color from blue to red to yellow to blue to green and back to blue in 6 seconds.

1. Modify the following highlighted CSS code to read:
   
   

   <!DOCTYPE html>
   <html>
   <head>
   <style> 
   div { width:100px;height:100px;background:blue;
      -webkit-animation-name: changeColor;
      -webkit-animation-duration: 6s; 
      animation-name:changeColor;
      animation-duration: 6s;
   }
   
   @-webkit-keyframes changeColor {
   0%   {background:red;}
   25%  {background:yellow;}
   50%  {background:blue;}
   100% {background:green;}
   }
   
   @keyframes changeColor {
   0%   {background:red;}
   25%  {background:yellow;}
   50%  {background:blue;}
   100% {background:green;}
   }
   </style>
   </head>
   <body>
   <div></div>
   </body>
   </html>

   
   NOTE: You can have any number of percentage values between 0 to 100%. (e.g., 10%, 15%, 23%, 50%, 75%, 90%, and 100%). If you only need two key frames than use the “from/to” keyframes discussed in the previous example. It is important to note that the percentage values are TIED TO the animation duration time. For example, if you have an animation duration of 10 seconds and you have keyframes in increments of 10% each totaling 10 keyframes (e.g., 10%, 20%, 30%...100%), than the transition from one keyframe to another is 1 second each.
2. CHECK POINT: Save the file and preview it in a browser. You should see the box animation colors four times.

3. Using the Position Properties: To Move Box

View Demo

The example below will change the color and animate the position of the box.

1. Modify the following highlighted CSS code to read:
   
   

   <!DOCTYPE html>
   <html>
   <head>
   <style> 
   div { width:100px;height:100px;background:blue;
   position:relative;
   -webkit-animation-name: changeColorAndPosition;
   -webkit-animation-duration: 6s; 
   animation-name: changeColorAndPosition;
   }
   
   @-webkit-keyframes changeColorAndPosition {
   0%   {background: red; left:0px;  top:0px;}
   25%  {background: yellow; left:200px;  top:0px;}
   50%  {background: blue; left:200px;  top:200px;}
   75%  {background: green; left:0px;  top:200px;}
   100% {background: red; left:0px; top:0px;}
   }
   
   @keyframes changeColorAndPosition {
   0%   {background: red; left:0px;  top:0px;}
   25%  {background: yellow; left:200px;  top:0px;}
   50%  {background: blue; left:200px;  top:200px;}
   75%  {background: green; left:0px;  top:200px;}
   100% {background: red; left:0px; top:0px;}
   }
   </style>
   </head>
   <body>
   <div></div>
   </body>
   </html>

   
   NOTES:
   
   • When creating an object that needs to move, notice that the position property is set to relative which means that is will move relative to and within its parent container. If you were to set it to absolute, it would move from the <body> container at the top/left corner of the browser (x=0 and y=0).
   • We used CSS properties “left” and “top” to move the object. You will see in the next example how to animate using the CSS translation property.
   • Notice that you can animate MULTIPLE properties by separating them with semicolon (;) like you do with any CSS properties.
2. CHECK POINT: Save the file and preview it in a browser. You should see

4. Using the Translate Properties: To Move Box

View Demo

The example below will change the color and animate the translation properties of the box. In the previous example you use the position properties to animate the box. Here we will use CSS animation properties of translate(x,y) which will give you better performance. It is best to use Left /Top for positioning objects and translate(x,y) for moving objects. (Changes from previous example are in blue.)

1. Modify the highlighted CSS code to read:
   
   

   <!DOCTYPE html>
   <html>
   <head>
   <style> 
   div{width:100px;height:100px;background:blue;
   position:relative;  this property is no longer need 
   -webkit-animation-name: changeColorAndPosition;
   -webkit-animation-duration: 6s; 
   animation-name: changeColorAndPosition;
   animation-duration: 6s;
   }
   
   @-webkit-keyframes changeColorAndPosition {
   0%   {background: red; -webkit-transform:translate(0px,0px);}
   25%  {background: yellow; -webkit-transform:translate(200px,0px);}
   50%  {background: blue; -webkit-transform:translate(200px,200px);}
   75%  {background: green; -webkit-transform:translate(0px,200px);}
   100% {background: red; -webkit-transform:translate(0px,0px);}
   }
   
   @keyframes changeColorAndPosition {
   0%   {background: red; -webkit-transform:translate(0px,0px);}
   25%  {background: yellow; -webkit-transform:translate(200px,0px);}
   50%  {background: blue; -webkit-transform:translate(200px,200px);}
   75%  {background: green; -webkit-transform:translate(0px,200px);}
   100% {background: red; -webkit-transform:translate(0px,0px);}
   }
   </style>
   </head>
   <body>
   <div></div>
   </body>
   </html>

   
   NOTES:
   
   • When creating an object that needs to move using the CSS translate property you no longer need the CSS position property.
   • Don’t forget to add the unit of measurement (e.g., px) to the end of the translate values; otherwise, the animation will not work.
2. CHECK POINT: Save the file and preview it in a browser. You should see that the box animate as before; however, it does not need a position property.

5. Using Multiple Animation Properties: To Add More Animation Behaviors To A Moving Box

View Demo

The example below will use multiple animation properties. (Changes from previous example are in blue. Beside the required animation-name and animation-duration, it is best to add one animation property at a time to see the effect more clearly.)

1. Modify the highlighted CSS to read:
   TIP: Add one property at a time to see changes incremental.
   
   

   <!DOCTYPE html>
   <html>
   <head>
   <style> 
   div{width:100px;height:100px;background:blue;
   position:relative;  this property is no longer need 
    Chrome,  Safari, Opera 
   -webkit-animation-name: changeColorAndPosition;
   -webkit-animation-duration: 6s;
   -webkit-animation-timing-function:linear;
   -webkit-animation-delay:2s;
   -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    -webkit-animation-play-state:running;
    Standard syntax 
   animation-name: changeColorAndPosition;
   animation-duration: 6s;
   animation-timing-function:linear;
   animation-delay:2s;
   animation-iteration-count:infinite;
   animation-direction:alternate;
   animation-play-state:running;
   }
   
   @-webkit-keyframes changeColorAndPosition {
   0%   {background: red; -webkit-transform:translate(0px,0px);}
   25%  {background: yellow; -webkit-transform:translate(200px,0px);}
   50%  {background: blue; -webkit-transform:translate(200px,200px);}
   75%  {background: green; -webkit-transform:translate(0px,200px);}
   100% {background: red; -webkit-transform:translate(0px,0px);}
   }
   
   @keyframes changeColorAndPosition {
   0%   {background: red; -webkit-transform:translate(0px,0px);}
   25%  {background: yellow; -webkit-transform:translate(200px,0px);}
   50%  {background: blue; -webkit-transform:translate(200px,200px);}
   75%  {background: green; -webkit-transform:translate(0px,200px);}
   100% {background: red; -webkit-transform:translate(0px,0px);}
   }
   </style>
   </head>
   <body>
   <div></div>
   </body>
   </html>

   
   NOTE: Additional optional animation properties has been added to the object (e.g., div element) not the keyframes.
2. CHECK POINT: Save the file and preview it in a browser. You should see additional animation properties being displayed.

6. Using Animation Properties Shortcuts

View Demo

 

This is the same animation effect as the previous example but uses shorthand animation properties. The order does not matter except when using duration and delay, they need to be in that order.

SYNTAX: animation: name duration timing_function delay interaction_count direction;

1. DELETE and REPLACE the long animation code with shorthand versions:
   
   NOTE: The strikethrough format was only used so that you can see the code that needed to be deleted. Delete these lines of code.
   
   

   <!DOCTYPE html>
   <html>
   <head>
   <style> 
   div{width:100px;height:100px;background:blue;
   position:relative;  this property is no longer need 
    Chrome,  Safari, Opera 
   -webkit-animation: changeColorAndPosition 6s linear 2s infinite alternate running; 
   
   -webkit-animation-name: changeColorAndPosition;
   
   -webkit-animation-duration: 6s;
   -webkit-animation-timing-function:linear;
   
   -webkit-animation-delay:2s;
   
   -webkit-animation-iteration-count:infinite;
   
   -webkit-animation-direction:alternate;
   
   -webkit-animation-play-state:running;
   
   Standard syntax 
   animation: changeColorAndPosition 6s linear 2s infinite alternate running;
   
   animation-name: changeColorAndPosition;
   
   animation-duration: 6s;
   animation-timing-function:linear;
   
   animation-delay:2s;
   
   animation-iteration-count:infinite;
   
   animation-direction:alternate;
   
   animation-play-state:running;
   }
   
   @-webkit-keyframes changeColorAndPosition {
   0%   {background: red; -webkit-transform:translate(0px,0px);}
   25%  {background: yellow; -webkit-transform:translate(200px,0px);}
   50%  {background: blue; -webkit-transform:translate(200px,200px);}
   75%  {background: green; -webkit-transform:translate(0px,200px);}
   100% {background: red; -webkit-transform:translate(0px,0px);}
   }
   
   @keyframes changeColorAndPosition {
   0%   {background: red; -webkit-transform:translate(0px,0px);}
   25%  {background: yellow; -webkit-transform:translate(200px,0px);}
   50%  {background: blue; -webkit-transform:translate(200px,200px);}
   75%  {background: green; -webkit-transform:translate(0px,200px);}
   100% {background: red; -webkit-transform:translate(0px,0px);}
   }
   </style>
   </head>
   <body>
   <div></div>
   </body>
   </html>

   NOTE: Like CSS properties like border is used by itself, you can specify all of the value in one line.
2. CHECK POINT: Save the file and preview it in a browser. You should see the animation behave the same;however, the code is smaller.

end .content

7. Using Animation Keyframes Shortcuts

View Demo

While probably not a good idea to do for beginner, you can delete the 0% and 100% keyframes and the animation will still work correctly from its initial CSS values.

1. DELETE the highlighted CSS code:
   
   NOTE: The strikethrough format was only used so that you can see the code that needed to be deleted. Delete these lines of code.
   
   

   <!DOCTYPE html>
   <html>
   <head>
   <style> 
   div{width:100px;height:100px;background:blue;
   position:relative;  this property is no longer need 
    Chrome,  Safari, Opera 
   -webkit-animation: changeColorAndPosition 6s linear 2s infinite alternate running; 
   Standard syntax 
   animation: changeColorAndPosition 6s linear 2s infinite alternate running;
   }
   
   @-webkit-keyframes changeColorAndPosition {
   0%   {background: red; -webkit-transform:translate(0px,0px);}
   25%  {background: yellow; -webkit-transform:translate(200px,0px);}
   50%  {background: blue; -webkit-transform:translate(200px,200px);}
   75%  {background: green; -webkit-transform:translate(0px,200px);}
   100% {background: red; -webkit-transform:translate(0px,0px);}
   }
   
   @keyframes changeColorAndPosition {
   0%   {background: red; -webkit-transform:translate(0px,0px);}
   25%  {background: yellow; -webkit-transform:translate(200px,0px);}
   50%  {background: blue; -webkit-transform:translate(200px,200px);}
   75%  {background: green; -webkit-transform:translate(0px,200px);}
   100% {background: red; -webkit-transform:translate(0px,0px);}
   }
   </style>
   </head>
   <body>
   <div></div>
   </body>
   </html>

   NOTE: To create a HOLD keyframe (a keyframe that has the same start and end properties), create two keyframes with the different percentage values but the SAME keyframe properties separated by commas instead of having two lines. To create a hold at the start of an animation, use the animation-delay property instead.
   5%, 35% {background: blue; -webkit-transfoms:translate(200px, 200px);}
   When you have an animation at zero percent translation of zero, you can delete that keyframe safely and the CSS animation will use the EXISTING animation properties instead.
2. CHECK POINT: Save the file and preview it in a browser. You should see the animation behave the same;however, the code is even smaller.

Flying Object Demo and Instruction

Flying Objects Demo
Flying Objects Instructions

Other Interactive Examples

Typically, you don't want the animation to start when the page first load, instead, is should be started or restarted from another object (e.g., a button or some other event (e.g., a mouse click). See examples below:

Multiple Flying Objects Demo

Add and Remove Class to Restart Animation

On Page Load

Only On Home Page

On Mouse Hover and On Mouse Click

Top CSS Animation Web Sites, Utilities, and Tools